import React from 'react'
import { Drawer, Form, Button, Input, message } from 'antd'
import VideoUpload from '@/components/VideoUpload'
import ImageUpload from '@/components/ImageUpload'

class DrawerForm extends React.Component {
    state = {
        id: '',
        visible: false,
        loading: false,
        videoUrl: [],
        picUrl: []
    }

    componentDidMount() {
        this.props.onRef(this)
    }

    onChangeState = state => {
        this.setState(state)
    }

    onChangeFormData = (type, val) => {
        if (type === 'image') {
            this.props.form.setFieldsValue({
                picUrl: val
            })
        }

        if (type === 'video') {
            this.props.form.setFieldsValue({
                videoUrl: val
            })
        }
    }

    // 获取详情
	getDetail = async id => {
        const { data } = await React.$axios.get(`/BrandPublicity/BrandPublicityDetail?id=${id}`)
        const { title, videoUrl, picUrl } = data

        this.setState({
            id,
            videoUrl: [{ uid: '-1', url: videoUrl }],
            picUrl: [{ uid: '-2', url: picUrl }]
        })

        this.props.form.setFieldsValue({ title, videoUrl, picUrl })

		this.setState({ visible: true })
	}

    // 显示隐藏左侧弹窗
    toggleDrawer = () => {
        this.props.form.resetFields()

        this.setState({
            id: '',
            visible: !this.state.visible,
            videoUrl: [],
            picUrl: []
        })
    }

    // 获取文件url
    getUrl = url => {
        if (!url) return
        const newUrl = url.split('/').slice(-2).join('/')

        return '/' + newUrl
    }
    
    // 提交表单
    handleSubmit = ev => {
        ev.preventDefault()

        this.props.form.validateFields(async (err, form) => {
            // 表单验证通过
            if (!err) {
                this.setState({ loading: true })

                let url = this.state.id ? 'UpdateBrandPublicity' : 'AddBrandPublicity'

                form.id = this.state.id
                form.videoUrl = this.getUrl(form.videoUrl)
                form.picUrl = this.getUrl(form.picUrl)

                const { code, message: mes } = await React.$axios.post(`/BrandPublicity/${url}`, form)

                message.info(mes)

                this.setState({ loading: false })

                if (code === 1) {
                    this.props.init()
                    this.toggleDrawer()
                }
            }
        })
    }

    render() {
        const { getFieldDecorator } = this.props.form
        const { id, videoUrl, picUrl } = this.state

        return (
            <div>
                <Drawer
                    title={ id ? '修改品牌' : '添加品牌'}
                    width={ 360 }
                    onClose={ this.toggleDrawer }
                    visible={ this.state.visible }
                    bodyStyle={{ paddingBottom: 80 }}
                >
                    <Form layout="vertical" hideRequiredMark>
                        <Form.Item label="标题名称">
                            {getFieldDecorator('title', {
                                rules: [{ required: true, message: '请输入标题名称' }],
                                getValueFromEvent: ev => ev.target.value.replace(/^\s+|\s+$/, '')
                            })(
                                <Input allowClear placeholder="标题名称" />
                            )}
                        </Form.Item>
                        <Form.Item label="视频" extra="仅支持.mp4、.rmvb、.mov、.avi格式，大小100MB以内">
                            {getFieldDecorator('videoUrl', {
                                rules: [{ required: true, message: '请添加视频' }]
                            })(
                                <VideoUpload 
                                    onChangeState={ this.onChangeState.bind(this) }
                                    onChangeFormData={ this.onChangeFormData.bind(this) }
                                    fileUrl={ videoUrl } 
                                />
                            )}
                        </Form.Item>
                        <Form.Item label="图片" extra="仅支持.jpg、.jpeg、.bmp格式，大小10MB以内">
                            {getFieldDecorator('picUrl', {
                                rules: [{ required: true, message: '请添加图片' }]
                            })(
                                <ImageUpload 
                                    onChangeState={ this.onChangeState.bind(this) }
                                    onChangeFormData={ this.onChangeFormData.bind(this) }
                                    fileUrl={ picUrl } 
                                />
                            )}
                        </Form.Item>
                    </Form>
                    <div
                        style={{
                            position: 'absolute',
                            right: 0,
                            bottom: 0,
                            width: '100%',
                            borderTop: '1px solid #e9e9e9',
                            padding: '10px 16px',
                            background: '#fff',
                            textAlign: 'right',
                        }}
                    >
                        <Button onClick={ this.toggleDrawer } style={{ marginRight: 8 }}>
                            取消
                        </Button>
                        <Button loading={ this.state.loading } onClick={ this.handleSubmit } type="primary">
                            确定
                        </Button>
                    </div>
                </Drawer>
            </div>
        )
    }
}

export default Form.create()(DrawerForm)